<template>
	<view>
		<u-navbar :title="title1" :autoBack="true" placeholder></u-navbar>
		<view class="tip">
			根据《互联网论坛服务社区管理规定》要求，用户必须完成认证后才能发布信息。
		</view>
		<view class="con">
			<view class="con__box">
				<form @submit="onSubmit(true, $event)">
					<button class="u-reset-button" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image :src="URL(avatarUrl)" class="con__box__tx" mode="aspectFill"></image>
					</button>
					<view class="u-demo-block__content" style="height: 91.67rpx;">
						<!-- 注意：由于兼容性差异，如果需要使用前后插槽，nvue下需使用u--input，非nvue下需使用u-input -->
						<u-input :placeholder="nickname" v-model="val" clearable type="nickname">
							<view class="label" slot="prefix">
								用户昵称
							</view>
						</u-input>
					</view>
					<view class="" style="padding: 57rpx 150rpx 88rpx;">
						<u-button form-type="submit" text="确认信息" color="#07BC5F" :disabled="disabled"
							@click="submit" :loading="loading"></u-button>
					</view>
				</form>
				<view class="u-flex u-flex-xy-center" style="font-size: 30rpx;color: #9E9E9E;">
					<u-checkbox-group @change="checkboxChange">
						<u-checkbox size="30rpx">
						</u-checkbox>
					</u-checkbox-group>
					已阅读并同意 <text style="color: #3A77DC;">《校果协议》</text>与<text style="color: #3A77DC;">《隐私协议》</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import user from '@/api/_user.js'
	export default {
		data() {
			return {
				disabled: true,
				ischeck: false,
				nickname: uni.getStorageSync('xguserinfo').username,
				val: '',
				avatarUrl: uni.getStorageSync('xguserinfo').avatar,
				loading:false
			};
		},
		methods: {
			checkboxChange(n) {
				if (n.length > 0) {
					this.disabled = false
				} else {
					this.disabled = true
				}
			},
			onChooseAvatar(e) {
				this.uploadImage(e.detail.avatarUrl); //上传头像
			},
			onSubmit(confirm, event) {
				if (confirm) {
					try {
						let {
							nickName
						} = event.detail.value;
						this.val = nickName;

					} catch (e) {
						uni.showToast({
							icon: 'none',
							title: e.message
						});
						return;
					}
				}
			},
			async submit() {
				let _this=this
				this.loading=true
				uni.showLoading({
					title:'信息上传中'
				})
				let res = await user.profile({avatar:this.avatarUrl,username:this.val?this.val:this.nickname})
				if(res.data.code==1){
					uni.$u.toast('信息上传成功')
					setTimeout(()=>{
						uni.navigateBack()
						uni.hideLoading()
						_this.loading=false
					},2000)
				}
				uni.hideLoading()
				_this.loading=false
				
			},
			uploadImage(url1) {
				//uni.uploadFile将微信返回的临时地址转成文件流传输给后端，从而上传服务器，拿到永久地址
				uni.uploadFile({
					url: `http://we.fuliaoxx.com/api/common/upload`,
					filePath: url1,
					name: 'file',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
						"token":uni.getStorageSync('xgtoken')
					},
					formData: {
						'user': this.val
					},
					success: (uploadFileRes) => {
						if(JSON.parse(uploadFileRes.data).code==1){
							this.avatarUrl = JSON.parse(uploadFileRes.data).data.url;
						}else if(JSON.parse(uploadFileRes.data).code==401){
							uni.$u.toast('登录失效')
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}else{
							uni.$u.toast(JSON.parse(uploadFileRes.data).msg)
						}
						
						console.log(this.avatarUrl)
						//进入登录流程
						// this.uniLogin();
					}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #EAEAEA;
	}

	.tip {
		background: #07BC5F;
		padding: 15rpx 20rpx 110rpx;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 25rpx;
		color: #FFFFFF;
		line-height: 36rpx;
	}

	.con {
		padding: 0 15rpx;

		&__box {
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			margin-top: -94rpx;
			padding: 146rpx 18rpx 680rpx;

			&__tx {
				width: 123rpx;
				height: 123rpx;
				background: #EBEBEB;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				margin-bottom: 30rpx;
			}
		}
	}

	.label {
		line-height: 50rpx;
		border-right: 1rpx solid #E6E6E4;
		width: calc(200rpx - 9px);
		margin: calc(20rpx - 6px) 40rpx calc(20rpx - 6px) 0;
		font-family: PingFang-SC, PingFang-SC;
		font-weight: 500;
		font-size: 27rpx;
		color: #333333;
		text-align: center;
	}
</style>